<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ref 用法  事件处理 </title>
</head> 
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script> -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
//需求 
/* 自定义组件 功能说明如下
   1 点击按钮 提示第一个输入框的值 
   2 当第2个输入框失去焦点时 提示这个输入框的值     
*/

//1 定义组件
    class Mycomponent extends React.Component {
        constructor(props){
            super(props)
            this.shouInput = this.shouInput.bind(this)
            this.handleBlur = this.handleBlur.bind(this)
        }

        shouInput(){
            const input = this.refs.content
            // alert(input.value)
            alert(this.input.value) //提倡这种写法
        }
        handleBlur(en){                 //所有的事件函数都有一个event对象参数 
            alert(en.target.value)      //set: ƒ (target, prop, value)
            console.log(en)
        }

        render(){
            return (
                <div>
                    <input type="text" ref="content" />                   {/*1  不提倡这样的写法*/}
                    <input type="text" ref={input=>this.input = input} /> {/*回调写法 */}
                    
                    <button onClick={this.shouInput}>提示输入</button>
                    <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
                </div>
            )
        }
    }
//2 渲染组件标签
ReactDOM.render(<Mycomponent/>,document.getElementById("root"))
//1 做交互从绑定事件监听 绑定this  写入事件函数 
//2 ref标识我组件内的某一个元素的 

</script>